<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 菜品管理 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container">
            <template>
                <el-button style="float: right" type="primary" icon="el-icon-circle-plus" @click="handleAdd()">新增</el-button>
                <el-table
                    :data="
                        form.pageIndex * form.pageSize < tableData.length
                            ? tableData.slice((form.pageIndex - 1) * form.pageSize, form.pageIndex * form.pageSize)
                            : tableData.slice((form.pageIndex - 1) * form.pageSize, tableData.length)
                    "
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column align="center" prop="name" label="菜名"> </el-table-column>
                    <el-table-column align="center" prop="mold" label="菜类"> </el-table-column>

                    <el-table-column align="center" prop="price" label="价格"> </el-table-column>
                    <el-table-column align="center" prop="des" label="菜品描述"> </el-table-column>
                    <el-table-column align="center" prop="picture" label="菜品图片">
                        <el-image slot-scope="imag_add" :src="imag_add.row.picture" fit="contain"></el-image>
                    </el-table-column>
                    <el-table-column align="center" width="" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
                            <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="undercarriage" label="上下架">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.undercarriage == 1" type="danger" @click="undercarriage(scope.row)">下架</el-button>

                            <el-button v-if="scope.row.undercarriage == 0" type="primary" @click="dercarriage(scope.row)">上架</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页开始 -->
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="form.pageIndex"
                        :page-size="form.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                    ></el-pagination>
                </div>
                <!-- 分页结束 -->
                <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#00D1B2" text="玩命加载中" />
            </template>
        </div>
        <!-- 修改弹出框 -->
        <el-dialog title="修改" :close-on-click-modal="false" :visible.sync="addVisible" width="30%">
            <el-form ref="form" enctype="multipart/form-data" :model="form" label-width="100px">
                <el-upload
                    class="upload-demo"
                    action="#"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-change="filechange"
                    list-type="picture"
                    :auto-upload="false"
                >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">请选择菜品图片进行修改</div>
                </el-upload>
                <el-form-item style="top: 50px; position: relative" label="轮播图描述：">
                    <el-input v-model="form.infor"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 新增弹出框 -->
        <el-dialog title="新增" :close-on-click-modal="false" :visible.sync="addVisible" width="60%">
            <el-form ref="form" enctype="multipart/form-data" :model="form" label-width="100px">
                <el-form-item style=" width:500px" label="菜名：">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="菜类：">
                    <el-select v-model="form.mold" placeholder="菜类" style="width:80px">
                        <el-option v-for="mold in foodmold" :key="mold.cate_id" :label="mold.cate_name" :value="mold.cate_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style=" width:200px" label="价格：">
                    <el-input v-model="form.price"></el-input>
                </el-form-item>
                <el-form-item label="描述：">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.des"> </el-input>
                </el-form-item>
                <el-upload
                    ref="upload"
                    class="upload-demo"
                    action="#"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-change="filechange"
                    list-type="picture"
                    :auto-upload="false"
                    style="position: relative;top:20px;"
                >
                    <div style="position:relative;left:250px">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">请选择菜品 图片进行上传</div>
                    </div>
                </el-upload>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button v-if="kStatus == '修改'" type="primary" @click="saveEdit()">修改</el-button>
                <el-button v-if="kStatus == '添加'" type="primary" @click="saveAdd()">添加</el-button>
                <el-button @click="addVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import VueElementLoading from 'vue-element-loading';
import { selectfood, addfood, updatefood, deletefood } from '../../api/food';
import { allcate } from '../../api/cate';
export default {
    components: {
        VueElementLoading
    },
    data: function() {
        return {
            addVisible: false,
            form: {
                fid: 0,
                des: '',
                name: '',
                price: '',
                mold: '',
                pageIndex: 1,
                pageSize: 3
            },
            tableData: [],
            formLabelWidth: '120px',
            isActive: false,
            pageTotal: 0,
            file: '',
            foodlist: [],
            foodmold: [],
            kStatus: ''
        };
    },
    created() {
        this.selectMold();
        this.initComm();
    },
    methods: {
        selectMold() {
            allcate()
                .then(res => {
                    this.foodmold = res.data.catelist;
                })
                .catch(err => {
                    console.log(err);
                });
        },
        filechange(file) {
            this.file = file.raw;
            // console.log(this.file);
        },
        handleRemove(file, fileList) {
            // console.log(file, fileList);
        },
        handlePreview(file) {
            // console.log(file);
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.form, 'pageIndex', val);
        },
        //初始化显示
        initComm() {
            this.isActive = true;
            selectfood()
                .then(res => {
                    for (var i = 0; i < res.data.length; i++) {
                        for (var j = 0; j < this.foodmold.length; j++) {
                            if (this.foodmold[j].cate_id == res.data[i].mold) {
                                res.data[i].mold = this.foodmold[j].cate_name;
                            }
                        }
                    }
                    this.tableData = res.data;
                    this.isActive = false;
                    this.pageTotal = res.data.length || 0;
                })
                .catch(err => {
                    console.log(err);
                });
        },
        saveEdit() {
            this.addVisible = false;
            var formData = new FormData();
            var aaa = this.form;
            formData.append('Mf', this.file);
            formData.append('fid', aaa.fid);
            formData.append('des', aaa.des);
            formData.append('name', aaa.name);
            formData.append('price', aaa.price);

            for (var j = 0; j < this.foodmold.length; j++) {
                if (this.foodmold[j].cate_name == this.form.mold) {
                    this.form.mold = this.foodmold[j].cate_id;
                }
            }

            formData.append('mold', aaa.mold);
            updatefood(formData)
                .then(res => {
                    this.initComm();
                    this.$message.success('修改成功');
                })
                .catch(err => {
                    console.log(err);
                });
        },
        saveAdd() {
            this.addVisible = false;
            var formData = new FormData();
            var aaa = this.form;
            formData.append('Mf', this.file);
            formData.append('des', aaa.des);
            formData.append('name', aaa.name);
            formData.append('price', aaa.price);
            formData.append('mold', aaa.mold);
            addfood(formData)
                .then(res => {
                    this.initComm();
                    this.$message.success('添加成功');
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 添加操作
        handleAdd() {
            this.kStatus = '添加';
            this.form.fid = null;
            this.form.des = null;
            this.form.name = null;
            this.form.price = null;
            this.form.mold = null;
            if (this.file !== '') this.$refs.upload.clearFiles();
            this.addVisible = true;
        },
        handleEdit(row) {
            this.kStatus = '修改';
            this.form.fid = row.fid;
            this.form.des = row.des;
            this.form.name = row.name;
            this.form.price = row.price;
            this.form.mold = row.mold;
            this.addVisible = true;
        },
        handleDelete(row) {
            this.$confirm('是否要进行删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    var ddd = JSON.stringify({
                        // 参数
                        fid: row.fid
                    });
                    deletefood(ddd)
                        .then(res => {
                            this.initComm();
                            this.$message.success('删除成功');
                        })
                        .catch(err => {
                            console.log(err);
                        });
                })
                .catch(err => {
                    console.log(err);
                });
        },
        undercarriage(row) {
            this.addVisible = false;
            var formData = new FormData();
            formData.append('undercarriage', 0);
            formData.append('fid', row.fid);

            updatefood(formData)
                .then(res => {
                    this.initComm();
                    this.$message.success('修改成功');
                })
                .catch(err => {
                    console.log(err);
                });
        },
        dercarriage(row) {
            this.addVisible = false;
            var formData = new FormData();
            formData.append('undercarriage', 1);
            formData.append('fid', row.fid);

            updatefood(formData)
                .then(res => {
                    this.initComm();
                    this.$message.success('修改成功');
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //分页
        handleSelectionChange() {}
    }
};
</script>

<style>
.user-avator {
    margin-left: 20px;
}
.user-avator img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.container {
    height: 100%;
}
</style>
